<template>
  <div class="commin-manage over-bg">
    <div class="title text-t1 text-left text-18 person-bg bdb-borderBase">
      {{ $t("global.entrustedManagement") }}
    </div>
    <div
      class="tab-box textperson-t3 person-bg flex js-st align-center point bdb-borderBase"
    >
      <div
        class="tab text-14"
        to="curent"
        @click="changeTab(1)"
        :class="{ 'textperson-t2 text-bold active-line': state.active === 1 }"
      >
        {{ $t("global.currentCommission") }}
      </div>
      <div
        class="tab text-14 textperson-t3"
        @click="changeTab(2)"
        :class="{ 'textperson-t2 text-bold active-line': state.active === 2 }"
      >
        {{ $t("global.historyCommission") }}
      </div>
    </div>
    <div class="commin-list person-bg">
      <Curent v-if="state.active === 1" />
      <History v-else />
    </div>
  </div>
</template>

<script>
import { computed, onMounted, reactive, watch } from "vue";
import { useRoute, useRouter } from "vue-router";
import History from "./history.vue";
import Curent from "./curent.vue";
export default {
  components: { History, Curent },
  setup() {
    const state = reactive({
      active: 1,
      dialogHuazhuan: false,
    });
    const $route = useRoute();
    const $router = useRouter();
    const getActive = computed(() => {
      return Number($route.query.active);
    });
    watch(getActive, (active) => {
      state.active = active;
    });
    // function
    onMounted(() => {
      state.active = Number(getActive.value);
    });
    const changeTab = (i) => {
      $router.replace("/person/ComminManage?active=" + i);
    };
    const Transfer = () => {
      state.dialogHuazhuan = true;
    };
    return {
      state,
      changeTab,
      Transfer,
    };
  },
};
</script>

<style scoped lang="less">
.commin-manage {
  width: 100%;
}
.title {
  width: 100%;
  height: 65px;
  line-height: 65px;
  padding: 0 30px;
  font-family: PingFang SC;
  font-weight: bold;
  margin-bottom: 1px;
}
.tab-box {
  width: 100%;
  height: 48px;
  padding: 0 30px;
  box-sizing: border-box;
}
.tab {
  min-width: 56px;
  height: 100%;
  line-height: 48px;
  margin-inline-end: 30px;
  position: relative;
}
.commin-list {
  padding: 30px 20px;
  box-sizing: border-box;
}
</style>
